<template>
	<view>
		<view class="c-box" id="bindingExhibition">
		    <view class="personal">
		        <view style="background-color: #e6e7e8">
		            <view class="dl">
		                <view class="dd">
		                    <view class="span" style="padding-right: 50rpx;text-align: left;">申请展会</view>
		                    <view style="overflow: hidden;" class="label">{{exhibition.exhibitionName}}</view>
		                </view>
		            </view>
		        </view>
		        <view class="dl">
		            <view class="dd">
		                <view class="span" style="margin-right: 0rem;padding-right: 50rpx;text-align: left;"><view style="color: red">*</view>公司名称</view>
		                <input type="text" v-model="currentUser.company" placeholder="请输入公司名称"/>
		            </view>
		            <view  class="dd">
		                <view class="span" style="margin-right: 0rem;padding-right: 50rpx;text-align: left;"><view style="color: red">*</view>联系人</view>
		                <input type="text" v-model="currentUser.userName" placeholder="请输入联系人"/>
		            </view>
		            <view  class="dd">
		                <view class="span" style="margin-right: 0rem;padding-right: 50rpx;text-align: left;"><view style="color: red">*</view>手机号</view>
		                <input type="text" v-model="currentUser.phone" placeholder="请输入手机号"/>
		            </view>
		            <view  class="dd">
		                <view class="span" style="margin-right: 0rem;padding-right: 50rpx;text-align: left;"><view style="color: red">*</view>职位</view>
		                <input type="text" v-model="nocUserExhibitionApply.position" placeholder="请输入职位"/>
		            </view>
		            <view  class="dd">
		                <view class="span" style="margin-right: 0rem;padding-right: 50rpx;text-align: left;"><view style="color: red">*</view>主营产品</view>
		                <input type="text" v-model="nocUserExhibitionApply.product" placeholder="请输入主营产品"/>
		            </view>
		            <view  class="dd">
		                <view class="span" style="margin-right: 0rem;padding-right: 50rpx;text-align: left;display: inline;">展位类型</view>
						
		                <picker mode="selector" @change="boothType" value="{{index}}" :range="boothTypeArray" range-key="name" style="width: 100%; border: 0; background: transparent; -webkit-appearance: none;" >
							<view v-if="index == '' || index == null">请选择</view>
		                    <view v-else>{{boothTypeArray[index].name}}</view>
		                </picker>
		            </view>
		            <view  class="dd">
		                <view class="span" style="margin-right: 0rem;padding-right: 50rpx;text-align: left;display: inline;">展位面积</view>
		                <input type="text" v-model="nocUserExhibitionApply.area" placeholder="请输入展位面积"/>
		            </view>
		            <view  class="dd" style="justify-content: start;">
		                <view class="span" style="margin-right: 0rem;padding-right: 50rpx;text-align: left;display: inline;">首次参展</view>
						<radio-group @change="ifFirst" >
							<label class="radio">
								<radio value="是">是</radio>
							</label>	
							<label class="radio">
								<radio value="否">否</radio>
							</label>
						</radio-group>
		             <!--   <view style="display: inline-flex; height: 1rem; font-size: 0.37rem;">
		                    <input  name="isfirst" style="width: 0.4rem;" value="是"/>是
		                </view>
		                <view style="display: inline-flex; height: 1rem; font-size: 0.37rem; margin-left: 20px;">
		                    <input  name="isfirst"  style="width: 0.4rem;" value="否"/>否
		                </view> -->
		            </view>
		            <view  class="dd">
		                <view class="span" style="margin-right: 0rem;padding-right: 50rpx;text-align: left;display: inline;">公司地址</view>
		                <input type="text" v-model="nocUserExhibitionApply.aviewress" placeholder="请输入公司地址"/>
		            </view>
		        </view>
		        <view class="bindingBtn">
		            <view class="bindingBtn-a" @click="goBack">返回</view>
		            <view class="bindingBtn-a" @click="submitApply" style="margin-left: 100rpx;">我要参展</view>
		        </view>
		        <view class="c-h98"></view>
		    </view>
		</view>
	</view>
</template>

<script>
	import bindApi from '@/api/bindingExhibition.js';
	import commonApi from '@/utils/commonMethod.js'
	export default {
		
		data() {
			return {
				
				currentUser: {},
				exhibition: {},
				nocUserExhibitionApply: {},
				exhibitionId: null,
				state: '', // 审核状态
				index: '',
				boothTypeArray: [
					{
						id: '0',
						name: '标准展位',
					},
					{
						id: '1',
						name: '异型展位',
					},
					{
						id: '2',
						name: '空地',
					},
				],
				
				startTime:'', //进入页面时间
				endTime:'',//离开页面时间
				currentUrl:'',//当前页面全路径
			}
		},
		async onLoad(options) {
			//获取当前用户
			const currentPromise = await this.getCurrentUser()
			this.exhibitionId = options.exhibitionId;
			this.getExhibition(this.exhibitionId);
			//this.getUserExhibitionInfo(this.exhibitionId,this.currentUser.id);
		},
		mounted() {
			const pages = getCurrentPages()
			const currentPage =pages[pages.length - 1]
			this.currentUrl = currentPage.$page.fullPath
		},
		onShow(){
			
			setTimeout(()=> {
				
				if (getApp().globalData.onShow) {
					getApp().globalData.onShow = 0;
					console.log("demo前后台切换之切到前台")
				}
				else {
					console.log("demo页面被切换显示")
					this.startTime = +new Date();
				}
				
			}, 100);
		},
		onHide(){
			console.log("hide");
			setTimeout(() => {
				var that = this
				if (getApp().globalData.onHide) {
					getApp().globalData.onHide = 0;
					console.log("还在当前页面活动")
				}
				else {
					that.endTime = +new Date();
					console.log("demo页面停留时间：" + (that.endTime - that.startTime))
					var stayTime = Math.round((that.endTime - that.startTime)/1000);
				   //这里获取到页面停留时间stayTime，然后了可以上报了
				   this.saveFootPrint(stayTime);
				}
			}, 100)
		},
		onUnload() {
			console.log("unload");
			setTimeout(() => {
				var that = this
				if (getApp().globalData.onHide) {
					getApp().globalData.onHide = 0;
					console.log("还在当前页面活动")
				}
				else {
					that.endTime = +new Date();
					console.log("demo页面停留时间：" + (that.endTime - that.startTime))
					var stayTime = Math.round((that.endTime - that.startTime)/1000);
				   //这里获取到页面停留时间stayTime，然后了可以上报了
				   this.saveFootPrint(stayTime);
				}
			}, 100)
		},
		methods: {
			saveFootPrint(stayTime){
				commonApi.saveFootPrint(this.currentUser.id,this.startTime,stayTime,this.currentUrl,"金诺云展-机械加工行业对接平台")
				
			},
			boothType(e){
				console.log(e);
				this.index =  e.detail.value
				this.nocUserExhibitionApply.boothType = this.boothTypeArray[e.detail.value].name
				console.log(this.nocUserExhibitionApply.boothType);
			},
			publicPhone(e){
				console.log(e.detail.value);
				this.nocUserExhibitionApply.isFirst = e.detail.value
			},
			getCurrentUser(){
				commonApi.currentUserAxios().then(res =>{
					this.currentUser = res.data.session_user_h5;
				});
			},
			
			getExhibition(id){
				bindApi.getExhibition(id).then(res =>{	
					console.log(res);
					this.exhibition = res.data.exhibition;
				})
				
			},
			goBack(){
				uni.navigateBack(1)
			},
			
			submitApply() {
				if (!this.currentUser.company) {
					uni.showModal({
						title: "",
						content: "请输入公司名称!",
						confimrText: "我知道了",
						showCancel:false,
						success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					return;
				}
				if (!this.currentUser.userName) {
					uni.showModal({
						title: "",
						content: "请输入联系人!",
						confimrText: "我知道了",
						showCancel:false,
						success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					return;
				}
	
				var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
				if (!myreg.test(this.currentUser.phone)) {
					uni.showModal({
						title: "",
						content: "手机号格式不正确!",
						confimrText: "我知道了",
						showCancel:false,
						success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					return;
				}
				if (!this.nocUserExhibitionApply.position) {
					uni.showModal({
						title: "",
						content: "请输入职位!",
						confimrText: "我知道了",
						showCancel:false,
						success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					return;
				}
				if (!this.nocUserExhibitionApply.product) {
					uni.showModal({
						title: "",
						content: "请输入主营产品!",
						confimrText: "我知道了",
						showCancel:false,
						success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					return;
				}
				this.nocUserExhibitionApply.userId = this.currentUser.id;
				this.nocUserExhibitionApply.exhibitionId = this.exhibition.id;
				this.nocUserExhibitionApply.company = this.currentUser.company;
				this.nocUserExhibitionApply.userName = this.currentUser.userName;
				this.nocUserExhibitionApply.phone = this.currentUser.phone;
				
				bindApi.submitApply(this.nocUserExhibitionApply).then(res =>{
					uni.showModal({
						title: "提示",
						content: "展会负责人将会在24小时内联系您!",
						showCancel:false,
						success: function (response) {
							if (response.confirm) {
								console.log('用户点击确定');
								//跳转上一页
								uni.navigateBack(1)
							} else if (response.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				})
			},
		}
	}
	
</script>

<style>
	.personal {
	    background: #fff;
	    overflow: hidden;
	}
	.personal .dl {
	    padding: 0 30rpx;
	}
	.personal .dd {
	    height: 100rpx;
	    border-bottom: 1px solid #ebebeb;
	    line-height: 100rpx;
	    display: flex;
	    /* justify-content: space-between; */
	}
	.dl .dd input{
		height: 100rpx;
	}
	.personal .dd .span {
	    flex-shrink: 0;
	    width: 135rpx;
	    text-align: right;
	    /* margin-right: 50rpx; */
	    color: #1a1a1a;
	    font-size: 30rpx;
		display: flex;
	}
	.personal .dd .label {
	    width: 100%;
	    flex-shrink: 1;
	    border: 0;
	    height: 100rpx;
	    background: #e6e7e8;
	    font-size: 28rpx;
	}
	
	
	.bindingBtn {
		margin-top: 5%;
		margin-left: 14%;
		width: 80%;
	}
	.bindingBtn .bindingBtn-a{
		display: inline-block;
		width: 35%;
		font-size: 16px;
		border-radius: 10rpx;
		border: 0px;
		height: 70rpx;
		background-color: #019d9d;
		color: white;
		text-align: center;
		line-height: 70rpx;
	}
	
</style>